<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .div_dis{
            padding: 10px 10px;
            width: 200px;
            height: 40px;
            border: 1px #f00 solid;
            background: yellow;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 120px;
            display: none;
        }
    </style>
</head>
<body>
<!-- 按钮 -->
<label id="info">
    <input type="checkbox" onmouseover="showTooltip()" onmouseout="hideTooltip()" />免登录十天
</label>
<!-- 弹框 -->
<p class="div_dis">
    温馨提示：请勿在网吧或公共场所使用免登录十天
</p>
</body>
</html>
<script>
    /*p标签中的温馨提示文字，当前是不显示的。
    请用js实现：当鼠标滑到“免登录十天”文字块上时，显示温馨提示文字，并将指针变为手形；
    当鼠标滑出时，又恢复原样。*/
    function showTooltip() {
        var div_dis = document.getElementsByClassName('div_dis');
        div_dis[0].style.display = 'block';
    }
    function hideTooltip() {
        var div_dis = document.getElementsByClassName('div_dis');
        div_dis[0].style.display = 'none';
    }
</script>

